<template>
  <AppHeader
    title="单项选择"
    :banAnimate="true"
    backgroundColor="rgba(0,0,0,0)"
    titleColor="#ffffff"
  >
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-arrow-left-white.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <div class="top-bg">
      <div class="score">{{form.score}}</div>
      <div class="comments">{{(form.score / form.full_score || 0).toFixed(2) || 0}} %</div>
    </div>
    <div class="score-details">
      <div class="box">
        <van-cell title="总分" :value="form.full_score || 0" />
        <van-cell title="作答用时" :value="form.use_time" />
      </div>
      <div class="result-list" >
        <div class="item" v-for="(item,i) in resultlist" :key="i">
          <img v-if="i===0"  src="@/assets/images/written/right.png"  width="23"  height="16" />
          <img v-if="i===1"  src="@/assets/images/written/error.png" width="18"  height="18" />
          <img v-if="i===2"  src="@/assets/images/written/halfRight.png"  width="26" height="16"  />
          <img v-if="i===3" src="@/assets/images/written/unknown.png"  width="12"  height="18"  />
          <div class="t0" >{{item.name}}</div>
          <div class="t1" >{{item.num}} </div>
      </div>
      </div>
      <van-collapse v-model="activeNames">
        <template v-for="(item,inx) in dataList" :key="item.sid">
          <van-collapse-item name="1" >
            <template #title>
              <div class="titleleft">{{item.module_type_name }}（<span><i>{{score[inx] * resultlist[0].num}}分</i>/{{form.full_score}}分） </span></div>
            </template>
            <div class="list-item" v-for="(child,i) in item.children" :key="i">
              <div class="title">{{i+1}}、<span v-html="child.stem"></span></div>
              <div class="score">（<span class="text-blue">{{child.answer.sorce < 1 ? 0 : child.answer.sorce}}分</span>/{{child.answer.sorceTotal}}分）</div>
              <div v-for="(option,idx) in child.options" :key="idx" class="option">
                <template v-if="child.answer.num === idx">
                  <span class="unchecked " :class="(child.answer.sType && child.answer.isAnswer) ? 'checked-blue': (child.answer.sType && !child.answer.isAnswer) ? 'checked-red' : ''">{{idx===0?'A':idx===1?'B':idx===2?'C' : 'D'}}</span>
                </template>
                <span class="unchecked" v-else>{{idx===0?'A':idx===1?'B':idx===2?'C' : 'D'}}</span>
                <span class="option-item" v-html="option.stem" />
              </div>
              <div class="answer">参考答案  
                <template  v-for="(option,idx) in child.options" :key="idx">
                  <span class="text-blue" v-if="option.id === child.ref_info.answers[0]">{{idx===0?'A':idx===1?'B':idx===2?'C' : 'D'}}</span>
                </template>
              </div>
              <div class="explain">试题解析  <span class="text-blue">{{child.ref_info.solving_idea || '--'}}</span></div>
            </div>
          </van-collapse-item>
        </template>
        </van-collapse>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, watch } from "vue";

import { getExerciseDetail } from "@/api/writtenTest";
const router = useRouter();
const score = ref([])
const dataList = ref([])
const onClickLeft = () => {
  router.back();
};
const form = ref({})
onMounted(()=>{
  getExerciseDetail({rm_id:JSON.parse(sessionStorage.getItem('successObj')).id}).then(res=>{
    form.value  = res.data
    dataList.value = res.data.json.parts
    console.log(dataList.value)
    var totalSuccess = 0   //全部对了多少
    var totalError = 0  //全部错了多少
    var totalNotDone = 0  //全部多少未作
    dataList.value.forEach((item,index)=>{
      var i = 0
      if(item.children.length){
        item.children.forEach(child =>{
          if(child.answer.sType === 'A'){
            child.answer.num = 0
          } else if(child.answer.sType === 'B'){
            child.answer.num = 1
          }else if(child.answer.sType === 'C'){
            child.answer.num = 2
          }else if(child.answer.sType === 'D'){
            child.answer.num = 3
          }
          if(child.answer.isAnswer){
            i ++
            totalSuccess ++
          }
          if(!child.answer.isAnswer && child.answer.sorce === 0){
            totalError ++
          }
          if(!child.answer.isAnswer && child.answer.sorce === -1){
            totalNotDone ++
          }
        })
      }
      score.value[index]=i
    })
    resultlist[0].num = totalSuccess
    resultlist[1].num = totalError
  })
})
const activeNames = ref(['1']);
const resultlist = [
  { id: 1, name: "已做对", num: '0'},
  {id:2,name:"已做错",num:'0'},
  {id:3,name:"已半对",num:'0'},
  { id:4,name:"已半对",num:'0'}
];
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  overflow-y: auto;
  background: url(/src/assets/images/listening/work-bg.png) top no-repeat;
    background-size: 100% 300px;
  .top-bg {
    height: 330px;
    padding-top: 90px;
    text-align: center;
    color: #fff;
    .score {
      font-size: 66px;
      margin-bottom: 20px;
    }
    .comments {
      font-size: 18px;
      margin-bottom: 30px;
      letter-spacing: 2px;
    }
    .success-txt {
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-right: 10px;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .score-details {
    width:100%;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 280px;
    .result-list {
      margin-bottom: 10px;
      font-size: 14px;
      padding: 10px 0;
      display: flex;
      border:1px solid #E5E5E5;
      .item{
        flex: 1;
        text-align: center;
        .t0{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
font-style: normal;
margin: 10px 0;
        }
        .t1{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
font-style: normal;
margin-bottom: 15px;
        }
      }
    }
    .titleleft
      {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
          span{
            color: #8E8E8E;
            i{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #FA192C;
              line-height: 22px;
              text-align: left;
              font-style: normal;
            }
          }
      }
    .list-item{
       padding: 0 15px;
       .text-blue{
        color: #0CB76C;
       }
        .title{
          font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            line-height: 25px;
            text-align: left;
            font-style: normal;
        }
       .option{
      margin: 15px 0;
      .unchecked{
        display:inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #8E8E8E;
        border-radius: 50%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #8E8E8E;
        text-align: left;
        font-style: normal;
        text-align: center;
        line-height: 28px;
        &.checked-blue{
          background: #0CB76C;
          color: #ffffff;
          border: 1px solid #0CB76C;
        }
        &.checked-red{
          background: #FA192C;
          color: #ffffff;
          border: 1px solid #FA192C;
        }
      }
      .option-item{
            font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #8E8E8E;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          margin-left: 15px;
          }
        }
        .answer{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #8E8E8E;
line-height: 16px;
text-align: left;
font-style: normal;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 15px;
        }
        .explain{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #8E8E8E;
line-height: 16px;
text-align: left;
font-style: normal;
padding-top: 15px;
padding-bottom: 15px;
        }
      }
   }
}
</style>
